<?php

use yii\helpers\Html;

/* @var $this yii\web\View */
/* @var $model backend\models\Doctor */

$this->title = 'Update Doctor: ' . $model->name;
$this->params['breadcrumbs'][] = ['label' => 'Doctors', 'url' => ['index']];
$this->params['breadcrumbs'][] = ['label' => $model->name, 'url' => ['view', 'id' => $model->id]];
$this->params['breadcrumbs'][] = 'Update';
$this->registerCssFile('/uploadifive/uploadifive.css');
$this->registerCssFile('/Jcrop/css/jquery.Jcrop.min.css');
$this->registerJsFile('/uploadifive/jquery.uploadifive.min.js',['position'=>\yii\web\View::POS_HEAD,'depends'=>'backend\assets\AppAsset']);
$this->registerJsFile('/Jcrop/js/jquery.Jcrop.min.js',['position'=>\yii\web\View::POS_HEAD,'depends'=>'backend\assets\AppAsset']);
?>

<div class="admin-content">
    <div class="admin-content-body">
        <div class="am-cf am-padding am-padding-bottom-0">
            <div class="am-fl am-cf">
                <strong class="am-text-primary am-text-lg"><a href="<?=\yii\helpers\Url::toRoute('doctor/index')?>">医生列表</a></strong> /
                <small><?=$model->name?></small>
            </div>
        </div>
        <hr>
        <form action="" id="doctor_form"></form>
        <div class="am-tabs am-margin" data-am-tabs="">
            <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active"><a href="#tab1">基本信息</a></li>
                <li><a href="#tab2">医生头像</a></li>
                <li><a href="#tab3">医生生活照</a></li>
            </ul>

            <div class="am-tabs-bd" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">医生姓名</div>
                        <div class="am-u-sm-8 am-u-md-8">
                            <input type="text" value="<?=$model->name?>" class="am-form-field am-radius" placeholder="输入医生的真实姓名">
                        </div>
                        <div class="am-hide-sm-only am-u-md-2">*必填，不可重复</div>
                    </div>
                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">性别</div>
                        <div class="am-u-sm-8 am-u-md-10">
                            <div class="am-btn-group">
                                <label>
                                    <input type="radio" name="sex" value="option1" checked> 男
                                </label>
                                <label>
                                    <input type="radio" name="sex" value="option1"> 女
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">推荐类型</div>
                        <div class="am-u-sm-8 am-u-md-10">
                            <div class="am-btn-group" data-am-button="">
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 允许评论
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 置顶
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 推荐
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 热门
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 轮播图
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            生日
                        </div>
                        <div class="am-u-sm-8 am-u-md-10">
                            <form action="" class="am-form am-form-inline">
                                <div class="am-form-group am-form-icon">
                                    <i class="am-icon-calendar"></i>
                                    <input type="date" class="am-form-field am-input-sm" placeholder="生日">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">审核</div>
                        <div class="am-u-sm-8 am-u-md-10">
                            <div class="am-btn-group" data-am-button="">
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="radio" name="options" id="option1"> 正常
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="radio" name="options" id="option2"> 待审核
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="radio" name="options" id="option3"> 不显示
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            所在地
                        </div>
                        <div class="am-u-sm-4 am-u-md-6">
                            <div id="element_id" class="am-form">
                                <select class="province other" data-first-title="选择省">
                                    <option value="">请选择</option>
                                    <option value="北京市" selected>北京市</option>
                                </select>
                                <select class="city" data-first-title="选择市">
                                    <option value="">请选择</option>
                                    <option value="北京市" selected>北京市</option>
                                </select>
                                <select class="area"></select>
                            </div>
                        </div>
                        <div class="am-u-md-4 am-u-md-4">*必填，不可重复</div>
                    </div>
                </div>

                <div class="am-tab-panel am-fade" id="tab2">
                    <div class="am-g am-margin-top am-form">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            医生头像
                        </div>
                        <div class="am-u-sm-8 am-u-md-4">
                            <a id="file_upload"></a>
                        </div>
                        <div class="am-hide-sm-only am-u-md-6">
                            <button id="crop_btn">开始裁剪</button>
                            <button id="crop_btn_cal">取消裁剪</button>
                        </div>
                    </div>
                    <div class="am-g am-margin-top am-form" style="display: none;" id="crop_btn_div">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            <button id="crop_btn_click" class="am-btn am-btn-primary am-btn-xs">确定裁剪</button>
                        </div>
                        <div class="am-u-sm-8 am-u-md-4">
                        </div>
                        <div class="am-hide-sm-only am-u-md-6">
                        </div>
                    </div>
                    <div class="am-g am-margin-top am-form">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        </div>
                        <div class="am-u-sm-8 am-u-md-4">
                            <img id="head_pic" src="" />
                            <!--保存裁剪的图片坐标-->
                            <input type="hidden" id="x1" value="none">
                            <input type="hidden" id="x2" value="none">
                            <input type="hidden" id="y1" value="none">
                            <input type="hidden" id="y2" value="none">
                            <input type="hidden" id="head_picUrl" value="none">
                        </div>
                        <div class="am-hide-sm-only am-u-md-6"></div>
                    </div>
                </div>

                <div class="am-tab-panel am-fade" id="tab3">
                    <form class="am-form">
                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                SEO 标题
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end">
                                <input type="text" class="am-input-sm">
                            </div>
                        </div>

                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                SEO 关键字
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end">
                                <input type="text" class="am-input-sm">
                            </div>
                        </div>

                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                SEO 描述
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end">
                                <textarea rows="4"></textarea>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <div class="am-margin">
            <button type="button" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
            <button type="button" class="am-btn am-btn-primary am-btn-xs">放弃保存</button>
        </div>
    </div>
    <style>
        .uploadify-button{ background-color: #00b3ee;}
        .up { background: #00b3ee; border: 0; }
        .am-form select{ width: 120px; display:inline-block;}
    </style>
    <script src="/js/jquery.cxselect.min.js"></script>
    <script type="text/javascript">

        $(function(){
            //省市区三级联动插件
            $.cxSelect.defaults.emptyStyle = 'none';
            $('#element_id').cxSelect({
                url: '/data/cityData.json',               // 如果服务器不支持 .json 类型文件，请将文件改为 .js 文件
                selects: ['province', 'city', 'area'],  // 数组，请注意顺序
                emptyStyle: 'none'
            });

            //上传图片插件
            <?php $timestamp = time();?>
            $('#file_upload').uploadifive({
                //其他配置项
                'buttonText' : '上传头像',
                'buttonClass' : 'up',
                'fileType' : 'image/*',
                'formData'     : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                    'mulu' : 'doctor'
                },
                'uploadScript' : '<?php echo \yii\helpers\Url::toRoute('upload');?>',
                'uploadLimit' : 6, //上传图片限制数量
                'queueSizeLimit'  : 1,
                'multi' : false,
                'fileSizeLimit'   : 5242880,
                'onUploadComplete' : function(file, data) {
                    var obj = JSON.parse(data);
                    if (obj.status != 1) {
                        alert("系统异常！");
                    } else {
                        document.getElementById("doctor_form").disabled = false;
                        //显示图片
                        $('#head_pic').attr('src',obj.imgUrl);
                        $('#head_picUrl').val(obj.imgUrl);
                    }
                },
                onCancel : function(file) {
                    $("#frontSide").val("");
                    /* 注意：取消后应重新设置uploadLimit */
                    $data	= $(this).data('uploadifive'),
                        settings = $data.settings;
                    settings.uploadLimit++;
                    alert(file.name + " 已取消上传~!");
                },
                onFallback : function() {
                    alert("该浏览器无法使用!");
                },
                onUpload : function(file) {
                    document.getElementById("doctor_form").disabled = true;//当开始上传文件，要防止上传未完成而表单被提交
                },
            });

            //裁剪图片的时候获取坐标
            function showCoords(c)
            {
                $('#x1').val(c.x);
                $('#y1').val(c.y);
                $('#x2').val(c.x2);
                $('#y2').val(c.y2);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
            //裁剪图片获取坐标
            function clearCoords()
            {
                $('#coords input').val('');
            };
            //点击裁剪按钮
            $('#crop_btn').click(function(){

                if($('#head_pic').attr('src') == '')
                {
                    alert('图片不存在，无法裁剪');
                    return false;
                }
                //裁剪插件加载
                $('#head_pic').Jcrop({
                    onChange:   showCoords,
                    onSelect:   showCoords,
                    onRelease:  clearCoords,
                    bgFade:     true,
                    bgOpacity: .2,
                    setSelect: [ 60, 70, 540, 330 ]
                },function(){
                    jcrop_api = this;
                });
                $('#crop_btn_div').css('display','block'); //确定裁剪按钮显示
            });
            //裁剪取消按钮
            $('#crop_btn_cal').click(function(){
                if($('#head_pic').attr('src') == '')
                {
                    alert('图片不存在，不用取消裁剪');
                    return false;
                }
                jcrop_api.destroy();
                $('#crop_btn_div').css('display','none'); //确定裁剪按钮隐藏
            });

            //确定裁剪按钮
            $('#crop_btn_click').click(function(){
                var x1 = $('#x1').val();
                var x2 = $('#x2').val();
                var y1 = $('#y1').val();
                var y2 = $('#y2').val();
                if(x1 != 'none' && x2 != 'none' && y1 != 'none' && y2 != 'none')
                {
                    var picUrl = $('#head_picUrl').val();
                    $.post('<?=\yii\helpers\Url::toRoute('crop')?>',{x1:x1,x2:x2,y1:y1,y2:y2,imgUrl:picUrl},function(data){
                        var obj = JSON.parse(data);
                        if(obj.status == 1)
                        {
                            jcrop_api.destroy();
                            $('#crop_btn_div').css('display','none'); //确定裁剪按钮隐藏
                            $('#head_pic').attr('src',obj.imgUrl);
                        }
                    });
                }
                else
                {
                    alert('请选择之后进行裁剪');
                }

            });
        });
    </script>
</div>
